<template>
  <footer class="index_footer">
    <nav>
      <!-- <a @click="goTo(1)" :class="{'nav-bg':navInd == 1}">
        <i class="iconfont iconshouye1 mark"></i>
        <span>{{getLangId =='1'?'主页':getLangId =='2'?'Home':"主頁"}}</span>
      </a>
      <a @click="goTo(2)" :class="{'nav-bg':navInd == 2}">
        <i class="iconfont iconshishisuanli mark"></i>
        <span>{{getLangId =='1'?'节点算力':getLangId =='2'?'Hashrate':"節點算力"}}</span>
      </a>
      <a @click="goTo(3)" :class="{'nav-bg':navInd == 3}">
        <i class="iconfont iconjiaoyi2 mark"></i>
        <span>{{getLangId =='1'?'交易中心':getLangId =='2'?'Transaction':"交易中心"}}</span>
      </a>
      <a @click="goTo(4)" :class="{'nav-bg':navInd == 4}">
        <i class="iconfont iconfaxian mark"></i>
        <span>{{getLangId =='1'?'发现':getLangId =='2'?'Discover':"發現"}}</span>
      </a>
      <a @click="goTo(5)" :class="{'nav-bg':navInd == 5}">
        <i class="iconfont iconwode mark"></i>
        <span>{{getLangId =='1'?'我的':getLangId =='2'?'Me':"我的"}}</span>
      </a> -->
      <!-- <a @click="goTo(1)" :class="{'nav-bg':navInd == 1}">
        <i class="iconfont iconshouye1 mark"></i>
        <span>{{langText&&langText.home}}</span>
      </a>
      <a @click="goTo(2)" :class="{'nav-bg':navInd == 2}">
        <i class="iconfont iconshishisuanli mark"></i>
        <span>{{langText&&langText.nodepower}}</span>
      </a> -->
      <a @click="goTo(3)" :class="{'nav-bg':navInd == 3}">
        <i class="iconfont iconjiaoyi2 mark"></i>
        <span>{{langText&&langText.tradingcenter}}</span>
      </a>
      <a @click="goTo(5)" :class="{'nav-bg':navInd == 5}">
        <i class="iconfont iconjiaoyi2 mark"></i>
        <span>个人中心</span>
      </a>
      <!-- <a @click="goTo(4)" :class="{'nav-bg':navInd == 4}">
        <i class="iconfont iconfaxian mark"></i>
        <span>{{langText&&langText.find}}</span>
      </a>
      <a @click="goTo(5)" :class="{'nav-bg':navInd == 5}">
        <i class="iconfont iconwode mark"></i>
        <span>{{langText&&langText.mine}}</span>
      </a> -->
      <!-- <a @click="goTo(4)" :class="{'nav-bg':navInd == 4}"><i class="iconfont iconccb_icon-jiaoyi"></i><span>交易</span></a> -->
      <!-- <a @click="goTo(5)" :class="{'nav-bg':navInd == 5}"><i class="iconfont iconccb_icon-wode"></i><span>我的</span></a> -->
    </nav>
  </footer>
</template>

<script>
import { Base  } from '@/server/server.js';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      srcIndex: require("../assets/images/szxz/tab_icon_sy_pre.png"),
      srcNews: require("../assets/images/szxz/tab_icon_jqr_nor.png"),
      srcMy: require("../assets/images/szxz/tab_icon_fx_nor.png"),
      srcMyCenter: require("../assets/images/szxz/tab_icon_my_nor.png"),
      navInd: 3,
      langText:null,
      Index: {}
    };
  },
  created () {
  },
  mounted() {
    this.activeNav();
    this.getlang();
  },
  computed: {
    ...mapGetters(["lang",'getLangId'])
  },
  methods: {
    getlang(){
      Base.getlang().then(res=>{
        if(res.code==1){
          this.langText = Object.assign({},res.data.menu)
        }else{
          mui.toast(res.msg)
        }
      })
    },
    goTo(index) {
      switch (index) {
        case 1:
          // this.$router.push({ name: "Index" });
          this.$router.push({ name: "PanGold" });
          sessionStorage.setItem("btmNav", 1);
          break;
        case 2:
          this.$router.push({ name: "Hashrate" });
          sessionStorage.setItem("btmNav", 2);
          break;
        case 3:
          this.$router.push({ name: "Transaction" });
          sessionStorage.setItem("btmNav", 3);
          break;
        case 4:
          this.$router.push({ name: "Find" });
          sessionStorage.setItem("btmNav", 4);
          break;
        case 5:
          this.$router.push({ name: "Center" });
          sessionStorage.setItem("btmNav", 5);
          break;
      }
    },
    activeNav() {
      if (sessionStorage.getItem("btmNav")) {
        let index = sessionStorage.getItem("btmNav");
        this.navInd = index;
        // if (index == 1) {
        //   // tab_ico_my_nor  tab_ico_jy_nor tab_ico_my_fx tab_ico_jdnor tab_ico_sy_nor
        //   this.srcIndex = require("../assets/images/szxz/tab_icon_sy_pre.png");
        //   this.srcNews = require("../assets/images/szxz/tab_icon_jqr_nor.png");
        //   this.srcMy = require("../assets/images/szxz/tab_icon_fx_nor.png");
        //   this.srcMyCenter = require("../assets/images/szxz/tab_icon_my_nor.png");
        // } else if (index == 2) {
        //   this.srcIndex = require("../assets/images/szxz/tab_icon_my_nor.png");
        //   this.srcNews = require("../assets/images/szxz/tab_icon_jqr_pre.png");
        //   this.srcMy = require("../assets/images/szxz/tab_icon_fx_nor.png");
        //   this.srcMyCenter = require("../assets/images/szxz/tab_icon_my_nor.png");
        // } else if (index == 3) {
        //   this.srcIndex = require("../assets/images/szxz/tab_icon_my_nor.png");
        //   this.srcNews = require("../assets/images/szxz/tab_icon_jqr_nor.png");
        //   this.srcMy = require("../assets/images/szxz/tab_icon_fx_pre.png");
        //   this.srcMyCenter = require("../assets/images/szxz/tab_icon_my_nor.png");
        // } else if (index == 4) {
        //   this.srcIndex = require("../assets/images/szxz/tab_icon_my_nor.png");
        //   this.srcNews = require("../assets/images/szxz/tab_icon_jqr_nor.png");
        //   this.srcMy = require("../assets/images/szxz/tab_icon_fx_nor.png");
        //   this.srcMyCenter = require("../assets/images/szxz/tab_ico_my_pre.png");
        // }
      }
    }
  }
};
</script>
<style scoped lang="less">
@import "~link-less";
nav {
  // position: fixed;
  box-sizing: border-box;
  // left: 0;
  // bottom: 0;
  width: 100%;
  // height: 100px;
  padding: 5px 0;
  background-color: #fff;
  display: -webkit-flex;
  justify-content: space-between;
  a {
    color: #999;
    flex: 1;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    .mark{
      font-size: 32px;
    }
    & >span {
      font-size: 25px;
      // color: #9795D0;
      display: inline-block;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    .img {
      width: 40px;
      height: 40px;
    }
    .img_yes {
    }
    i {
      font-size: 20px;
    }
  }
  .nav-bg {
    color: #4EB6AD !important;
    & >span {
      // color: #406EC3;
    }
    & > img {
      width: 47px;
      height: 47px;
    }
  }
}
</style>
